<template>
  <div class="hello">
    	<ul>
        <li v-for="(item, index) in navArr" :key="index">
          <button 
            @click="tab(item.tab)" 
            :class="{ active : tabShow == item.tab }"
            >
            {{ item.name }}
          </button>
        </li>
      </ul>
      <div class="box">
        <div :is="tabShow"></div>
      </div>
  </div>
</template>

<script>

  let A = {
    template:`<h3>我是内容一的信息11111</h3>`
  }
  let B = {
    template:`<h3>我是内容二的信息22222222222</h3>`
  }

  export default {
    name:'Hello',
    data () {
      return {
        tabShow:'A',
        navArr: [
          {
            name: '内容一',
            tab: 'A'
          },
          {
            name: '内容二',
            tab: 'B'
          }
        ]
      }
    },
    components: {
        'A': A,
        'B': B
    },
    methods: {
        tab(currentShowTab){
            this.tabShow = currentShowTab;
        }
    },
    activated(){ // 组件被缓存的时候执行
      console.log(1)
    },
    deactivated(){ // 离开缓存组件的时候执行
      console.log(2)
    }
  }

</script>

<style scoped>
  .hello{
    overflow: hidden;
  }
  ul{
    margin-top: 120px;
    float: left;
  }
  .box{
    border: 1px #ccc solid;
    margin:120px 200px;
    width: 250px;
    height: 100px;
  }
  .active{
    color: #fff;
    background: blue;
  }

</style>

